<template>
  <el-dialog
    title="增加管理员"
    :visible.sync="visible"
    class="dialog"
    width="40%"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="100px"
      @submit.native.prevent
    >
      <el-form-item label="学号" :label-width="formLabelWidth" prop="id">
        <el-input
          v-model="form.id"
          autocomplete="off"
          size="small"
          @keyup.enter.native="submitForm('form')"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')" size="small"
          >确定</el-button
        >
        <el-button @click="visible = false" size="small">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      formLabelWidth: "120px",
      form: {
        id: "",
      },
      rules: {
        id: [{ required: true, message: "请输入学号", trigger: "change" }],
      },
    };
  },
  methods: {
    openDialog() {
      this.visible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addAdmin();
          setTimeout(() => {
            this.submit();
          }, 1000);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submit() {
      // console.log(this.form);
      this.$emit("close");
    },
    addAdmin() {
      this.$axios
        .post("/user/admin/add/" + this.form.id)
        .then((res) => {
          // console.log(res);
          const code = res.data.code;
          if (code == 500) {
            this.$notify.error({
              title: "提示",
              message: res.data.msg,
              duration: 2000,
              showClose: true,
            });
          } else if (code == 200) {
            this.$notify({
              title: "成功",
              message: res.data.msg,
              type: "success",
              duration: 2000,
              showClose: true,
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 50%;
}
//让dialog出现在屏幕正中间
.dialog {
  /deep/.el-dialog {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 10px);
    max-width: calc(100% - 10px);
    height: 35% !important;
    font-size: 0.5rem;
  }
  /deep/.el-dialog .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}
</style>